<template>
  <div class="organChart">
    <vue2-org-tree :horizontal="direction"
                   :render-content="renderContent"
                   @on-node-click="onNodeClick"
                   :data="treeData" />
  </div>
</template>

<script>
export default {
  name: 'organChart',
  data () {
    return {
      direction: true,
      treeData: {
        title: '董事会',
        children: [
          {
            title: '总经理',
            children: [
              {
                title: '行政总监',
                children: [
                  {
                    title: '财核部',
                    children: [
                      {
                        title: '会计',
                      }, {
                        title: '出纳',
                      }
                    ]
                  }, {
                    title: '行政部',
                    children: [
                      {
                        title: '人事行政',
                      }, {
                        title: '仓储后勤',
                      }
                    ]
                  }
                ]
              },
              {
                title: '市场总监',
                children: [
                  {
                    title: '企划部',
                    children: [
                      {
                        title: '策划',
                      }, {
                        title: '企宣',
                      }
                    ]
                  }, {
                    title: '营销部',
                    children: [
                      {
                        title: '销售',
                      }, {
                        title: '外贸',
                      }, {
                        title: '市场',
                      }
                    ]
                  }
                ]
              },
            ]
          }
        ],
      }
    };
  },
  created () { },
  methods: {
    //渲染树状结构图数据
    renderContent (h, data) {
      return (<div>{data.title}</div>)
    },
    //点击节点
    onNodeClick (e, data) {
      alert(data.title)
    }
  }
}
</script>
<style lang="less" scoped>
.organChart {
  padding: 10px;
}
</style>
<style lang='less'>
//@import url(); 引入公共css类
@import "~@/common/css/org-tree-home";
</style>
